<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入css-->
<head>
    <title th:text="个人资料"></title>
    <th:block th:include="admin/include/head :: head"/>
</head>
<link rel="stylesheet" th:href="@{/resources/file-input/css/fileinput.min.css}">
<body class="skin-blue sidebar-mini  pace-done" style="height: auto;">
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- form start -->
            <form id="form" class="form-horizontal">
                <input type="hidden" id="id" name="id">
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">登录名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="loginName" th:value="*{loginName}" autocomplete="off" disabled="disabled">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label require">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" th:value="*{name}" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label require">手机</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="mobile" name="mobile" th:value="*{mobile}" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="uploadFile" class="col-sm-2 control-label">用户头像</label>
                                <div class="col-sm-10">
                                    <input type="file" id="uploadFile" name="uploadFile" class="file-loading">
                                    <input type="hidden" id="photo" name="photo">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                        </div>
                        <div class="col-md-6">
                            <div class="col-md-2">
                            </div>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-info" id="updateRelation" onclick="saveForm()">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </form>
            <!-- customer form end -->
        </div>
    </div>
</section>
<!--引入js-->
<div th:replace="admin/include/footer :: foot"></div>
<script th:src="@{/resources/common/crud.js}"></script>
<script th:src="@{/resources/file-input/js/fileinput.min.js}"></script>
<script th:src="@{/resources/file-input/js/locales/zh.js}"></script>
</body>

<script th:inline="javascript">

    $(function(){
        initValidator();
    });

    function saveForm() {
        var bootstrapValidator = $('#form').data('bootstrapValidator');
        bootstrapValidator.validate();
        if(!bootstrapValidator.isValid()){ return false; }
        $.ajax({
            url: '/admin/sysUser/updateUserInfo',
            data: $("#form").serialize(),
            dataType: 'json',
            type: 'post',
            success: function (result) {
                if (result.code == 0) {
                    layer.alert('个人信息修改成功，请重新登录！', function () {
                        location.href = "/admin/logout";
                    });
                }else{
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("修改失败！");
            }
        })
    }

    //初始化文件上传组件
    var _fileinput = $("#uploadFile").fileinput({
        // you must set a valid URL here else you will get an error
        uploadUrl: '/uploadFile',
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 1,
        showPreview: false,
        showUpload: true,
        showCaption: true,
        language: 'zh',
        showUpload: true
    });
    _fileinput.on("fileuploaded", function (event, resp, previewId, index) {
        var _fileinfo = resp.response;
        $("#photo").val(_fileinfo.data.fileUrl);
    });

    function initValidator() {
        $('#form').bootstrapValidator({
            message: '输入值不满足要求',
            excluded: [':disabled', ':hidden'],
            verbose: false,//verbose为false表示一个字段的多个验证规则中，如果有一个验证不通过则继续去验证其他的字段 在0.5.2版本生效
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '必填'
                        },
                        stringLength: {
                            min: 1,
                            max: 20,
                            message: '不能少于1个或超过20个字符'
                        }
                    }
                },
                mobile: {
                    validators: {
                        notEmpty: {
                            message: '必填'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '手机号长度为11个字符'
                        },
                        regexp: {
                            regexp: /^0?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: '请输入正确的手机号'
                        }
                    }
                },
            }
        });
    }

</script>
</html>